import React, { Component } from 'react'
import { observer, inject } from 'mobx-react'
import { runInAction } from 'mobx'
import { Button, Table, Tag, Modal, Form, Input } from 'antd'

const FormItem = Form.Item


@inject('tag')
@Form.create()
@observer
class TagView extends Component {
	constructor(props) {
		super(props)
		this.tag = this.props.tag
	}

	componentDidMount() {
		this.tag.doGetTagList()
	}

	columns = [
		{
		  title: '索引',
		  key: '1',
		 	render: (text, record, index) => {
		 		return (
					<span>{index + 1}</span>
		 		)
		 	}
		},{
		  title: 'ID',
		  dataIndex: '_id',
		  key: '_id',
		}, {
		  title: '标签名称',
		  dataIndex: 'categoryName',
		  render: (text, record, index) => {
		  	return (
					<Tag style={{display: "inline-block"}} color="#108ee9">{text}</Tag>
		  	)
		  }
		},{
			title: '操作',
			render: (text, record, index) => {
				return (
					<div>
						<a onClick={() => {runInAction(() => {
							this.tag.visible = true
							this.tag.categoryName = record.categoryName
							this.tag.status = 'edit'
							this.tag.id = record._id
						})}}>编辑</a>
						<a style={{marginLeft: "10px"}} onClick={() => {this.tag.doDeletetag(record._id)}}>删除</a>
					</div>
				)
			}
		}
	]

	handleSubmit = () => {
		this.props.form.validateFields((err, values) => {
	    if (!err) {
	      	this.tag.status === 'add' ? this.tag.doAddtag(this.tag.categoryName) : this.tag.doEdittag(this.tag.id, this.tag.categoryName)
	      	runInAction(() => {
	      		this.tag.categoryName = ''
	      		this.tag.status = 'add'
				this.tag.id = ''
	      	})
	      }
	    })
	}

	render() {
		const { getFieldDecorator } = this.props.form

		const formItemLayout = {
	      labelCol: {
					span: 4
	      },
	      wrapperCol: {
	        span: 20
	      },
	    };

		return (
			<div className="box">
				<div className="shadow">
				</div>
				<div className="header">
					<h3 className="title">标签列表</h3>
					<Button className="add" type="primary" onClick={() => {
						runInAction(() => {
							this.tag.visible = true
						})
					}}>新增标签</Button>
				</div>
				<Table rowKey='_id' bordered={true} columns={this.columns} dataSource={this.tag.tagList}></Table>
				<Modal
		          title="新增标签"
		          destroyOnClose={true}
		          visible={this.tag.visible}
		          onOk={this.handleSubmit}
		          onCancel={() => {
		          	runInAction(() => {
						this.tag.visible = !this.tag.visible
						this.tag.categoryName = ''
						this.tag.status = 'add'
						this.tag.id = ''
					})
		          }}
		        >
		          <Form>
		          	<FormItem {...formItemLayout} label="标签名称">
				          {getFieldDecorator('categoryName', {
				          	initialValue: this.tag.categoryName,
				            rules: [{ required: true, message: '请输入你的标签名称!' }],
				          })(
				            <Input placeholder="标签名称" onChange={(e) => {
				            	runInAction(() => {
				            		this.tag.categoryName = e.target.value
				            	})
				            }} />
				          )}
		        	</FormItem>
		          </Form>
		        </Modal>
			</div>
		)
	}
}

export default TagView